<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<title>受灾区域</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link th:href="@{../assets/css/page.css}" rel="stylesheet" />
<link th:href="@{../assets/css/NGR.css}" rel="stylesheet" />
<!--[if lt IE 9]>
	<script th:src="@{../assets/js/html5shiv.js}"></script>
	<script th:src="@{../assets/js/respond.min.js}"></script>
<![endif]-->
<!-- <style>
.inside-header {
	    background:url(../assets/img/home/home.png);
	    width:100%;
	    height: 100%;
	    background-repeat : no-repeat;
	    background-color: #DAE8F5;
	}


</style>
 -->
  <style>
    .clicked{background-color:#34b4e3;
    width: 200px;  
        padding:8px;  
        border-color: #357ebd;  
        color: #fff;  
        -moz-border-radius: 1px;  
        -webkit-border-radius: 1px;  
        border-radius: 10px; /* future proofing */  
        -khtml-border-radius: 10px; /* for old Konqueror browsers */  
        text-align: center;  
        vertical-align: middle;  
        border: 1px solid transparent;  
        font-weight: 900;  
        font-size:125%  
    }
    
    
     .unclicked {  
        width: 200px;  
        padding:8px;  
        background-color: #428bca;  
        border-color: #357ebd;  
        color: #fff;  
        -moz-border-radius: 1px;  
        -webkit-border-radius: 1px;  
        border-radius: 10px; /* future proofing */  
        -khtml-border-radius: 10px; /* for old Konqueror browsers */  
        text-align: center;  
        vertical-align: middle;  
        border: 1px solid transparent;  
        font-weight: 900;  
        font-size:125%  
      }  
  
</style>
</head>
<body class="inside-header inside-aside ">
<div id="main" role="main">

<div class="widget-body no-padding">



<div id="map" style="width: 100%; height: 100%; margin: 0; padding: 0; position:absolute;background-color: #DAE8F5"></div>
<div style="position:absolute;width: 460px;height: 60px; background: #DAE8F5; margin-left: 70%;margin-top: 20px;">
	<input class="unclicked" id="addarea" type="button" style="height: 60px;width: 110px;"  value="绘制受灾区域"  />
	<input class="unclicked" id="cancelarea" type="button" style="height: 60px;width: 110px;"  value="取消本次绘制"  />
	<input class="unclicked" id="savearea" type="button" style="height: 60px;width: 110px;"  value="保存本次绘制"  />
	<input class="unclicked" id="deletearea" type="button" style="height: 60px;width: 110px;"  value="删除历史绘制"  />
	</div>


</div></div>


<script type="text/javascript" th:src="@{../assets/libs/jquery/dist/jquery.js}"></script>
<script type="text/javascript" th:src="@{../assets/libs/bootstrap/dist/js/bootstrap.js}"></script>
<script type="text/javascript" th:src="@{../assets/libs/toastr/toastr.js}"></script>
<script type="text/javascript" th:src="@{../assets/libs/bootstrap-table/dist/bootstrap-table.min.js}"></script>
<script type="text/javascript" th:src="@{../assets/libs/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js}"></script>
<script type="text/javascript" th:src="@{../assets/libs/bootstrap-table/dist/extensions/export/bootstrap-table-export.js}"></script>
<script type="text/javascript" th:src="@{../assets/libs/layer/src/layer.js}"></script>
<script type="text/javascript" th:src="@{../assets/js/page.js}"></script>
<script type="text/javascript" th:src="@{../assets/js/NGR.min.js}"></script>
<script th:inline="javascript">
var ifloor;
var str_x="";
var str_y="";
var heatmap1="";
var b=false;
var heatmap_history="";
var cname="";
(function () {
window.map = new NGR.View('map', {
        //通过开发者平台获取AppKey
        AppKey: "f83a1f3ce8374d7fbda8931f71933fde" 
    });
window.res = new NGR.DataSource({
        //通过开发者平台获取AppKey
        AppKey: "f83a1f3ce8374d7fbda8931f71933fde" 
    });
window.layers = {};
 
  var mapId = 2033;
 
  var control = NGR.control.floor();
 
  var onerror = function (e) {
    console.error(e, e.stack);
  };
document.getElementById("deletearea").onclick=function(){
	 if(""==heatmap_history){
	 		alert("该层没有需要删除的历史受灾区域")
	 		return;
	 }
	 if(confirm("确定删除该层历史受灾区域吗?")){
		var url="../affectedarea/updateByFloor";
	  $.ajax({
                url:url,
                type:"post",
                dataType:"json",
                data:{
                "ifloor":ifloor
                },
                success:function (data) {
               		alert(data.retmsg);
               		b=false;
					document.getElementById("addarea").setAttribute('class','unclicked');
					heatmap_history="";
					control.setCurrentFloor(ifloor, loadPlanarGraph);
                },
                error:function (error) {
					
                }
            })//ajax

}
}
document.getElementById("addarea").onclick=function(){
	 if(""!=heatmap_history){
	 		alert("该层有历史受灾区域还未删除，请删除后添加！")
	 		return;
	 }
	if(b==false){
	b=true
	document.getElementById("addarea").setAttribute('class','clicked');
	}else{
	b=false
	document.getElementById("addarea").setAttribute('class','unclicked');
	};

}
document.getElementById("cancelarea").onclick=function(){
	b=false
	document.getElementById("addarea").setAttribute('class','unclicked');
	str_x="";
	str_y="";
	heatmap1="";
	control.setCurrentFloor(ifloor, loadPlanarGraph);
}
//保存
document.getElementById("savearea").onclick=function(){
//<![CDATA[
	if(""==str_x){
	alert("没有需要保存的对象！");
	return;
	}
	prom();
	if(""!=cname && null!=cname){
	
	var url="../affectedarea/add";
	  $.ajax({
                url:url,
                type:"post",
                dataType:"json",
                data:{
                "str_x":str_x,
                "str_y":str_y,
                "ifloor":ifloor,
                "cname":cname
                },
                success:function (data) {
               		alert(data.retmsg);
               		b=false
					document.getElementById("addarea").setAttribute('class','unclicked');
					heatmap1="";
					str_x="";
					str_y="";
					areaAjax(ifloor);
					 control.setCurrentFloor(ifloor, loadPlanarGraph);
                },
                error:function (error) {
					
                }
            })//ajax
	
	}
	//]]> 
}
map.on('click', function (e) {
if(b){
str_x+=NGR.CRS.EPSG3857.project(e.latlng).x+",";
str_y+=NGR.CRS.EPSG3857.project(e.latlng).y+",";
	var url="../affectedarea/changeJson";
		  $.ajax({
                url:url,
                type:"post",
                dataType:"json",
                data:{
                "str_x":str_x,
                "str_y":str_y
                },
                success:function (data) {
               		 heatmap1=data.item;
               		 control.setCurrentFloor(ifloor, loadPlanarGraph);
                },
                error:function (error) {
					
                }
            })//ajax
            }//if
})

// 请求楼层数据
  var loadPlanarGraph = function (planarGraphId) {
    res.requestPlanarGraph(planarGraphId).then(function (layerInfo) {
      //console.log(layerInfo);
      NGR.IO.fetch({
        url: '../assets/fonts/style.template.json',
        onsuccess: JSON.parse
      }).then(function (style){
        // 请求模拟热图数据
        return NGR.IO.fetch({
          url: '../assets/fonts/heatmap.template.json',
          onsuccess: JSON.parse
        }).then(function (heatmap) {
		map.clear();
		layers.frame = NGR.featureLayer(layerInfo, {
            layerType: 'Frame',
            styleConfig: style
        });
         map.addLayer(layers.frame); // 将楼层框架图层添加到地图中去
        // 准备商铺图层
        layers.area = NGR.featureLayer(layerInfo, {
            layerType: 'Area',
            styleConfig: style
        });
        map.addLayer(layers.area); // 将商铺图层添加到地图中去
        
        // 准备商铺文字和图标图层
        layers.annotation = NGR.featureLayer(layerInfo.Area, {
            layerType: 'LogoLabel',
            styleConfig: style
        });
        // 准备公共设施图标图层
        layers.facility = NGR.featureLayer(layerInfo.Facility, {
            layerType: 'Facility',
            styleConfig: style
        });
        // 准备碰撞检测图层组
        layers.collision = NGR.layerGroup.collision({
            margin: 3
        });
        layers.collision.addLayer(layers.annotation); // 将商铺文字和图标图层添加到碰撞检测图层组中去
        layers.collision.addLayer(layers.facility); // 将公共设施图标图层添加到碰撞检测图层组中去
        map.addLayer(layers.collision); // 将碰撞检测图层组添加到地图中去
        if(""!=heatmap1){
        heatmap=JSON.parse(heatmap1);
        }
        if(""!=heatmap_history){
        heatmap=JSON.parse(heatmap_history);
        }
         layers.heatMap = NGR.featureLayer(heatmap, {
            layerType: 'Heatmap',
            styleConfig: style
          });
		 map.addLayer(layers.heatMap);
        map.render();   // 所有图层都添加到地图后，渲染地图 
      }).fail(onerror);
    }).fail(onerror);
   });
};
// 请求地图数据
  res.requestMap(mapId).then(function (mapInfo) {
    res.requestPOIChildren(mapInfo.poi).then(function(floors) {
      // 初始化楼层控件
      map.addControl(control);
      control.on('change', function (e) {
		ifloor=e.to;
		areaAjax(e.to);
		b=false
		document.getElementById("addarea").setAttribute('class','unclicked');
        control.setCurrentFloor(e.to, loadPlanarGraph);
      });
      control.setFloorList(floors);
		ifloor=floors[4].id;
		areaAjax(floors[4].id);
      control.setCurrentFloor(floors[4].id, loadPlanarGraph);
    }).fail(onerror);
  }).fail(onerror);

}).call(this);

function areaAjax(ifloor){
 $.ajax({
                url:"../home/findArea",
                type:"post",
                dataType:"json",
                data:{
                "ifloor":ifloor
                },
                success:function (data) {
               		 heatmap_history=data.item;
                },
                error:function (error) {
					
                }
            })//ajax
}
function prom() {  
         cname = prompt("请输入需要保存区域的名称", ""); //将输入的内容赋给变量 name ，
        //这里需要注意的是，prompt有两个参数，前面是提示的话，后面是当对话框出来后，在对话框里的默认值  
  
    }
</script>
</body></html>

